﻿
@{
    ViewData["Title"] = "GridAdvance";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Gallery Advance</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Gallery</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Gallery Advance</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <!-- [ Gallery-Grid ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Julia</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-julia">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="advance-1" />
                                                <figcaption>
                                                    <h2>Passionate <span>Julia</span></h2>
                                                    <div>
                                                        <p>Julia dances in the deep dark</p>
                                                        <p>She loves the smell of the ocean</p>
                                                        <p>And dives into the morning light</p>
                                                    </div>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-julia">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="advance-2" />
                                                <figcaption>
                                                    <h2>Passionate <span>Julia</span></h2>
                                                    <div>
                                                        <p>Julia dances in the deep dark</p>
                                                        <p>She loves the smell of the ocean</p>
                                                        <p>And dives into the morning light</p>
                                                    </div>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Goliath</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-goliath">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="advance-3" />
                                                <figcaption>
                                                    <h2>Thoughtful <span>Goliath</span></h2>
                                                    <p>When Goliath comes out, you should run.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-goliath">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="advance-4" />
                                                <figcaption>
                                                    <h2>Thoughtful <span>Goliath</span></h2>
                                                    <p>When Goliath comes out, you should run.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Hera</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-hera">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="advance-5" />
                                                <figcaption>
                                                    <h2>Tender <span>Hera</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="far fa-file-pdf f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-image f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-archive f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-code f-36"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-hera">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="advance-6" />
                                                <figcaption>
                                                    <h2>Tender <span>Hera</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="far fa-file-pdf f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-image f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-archive f-36"></i></a>
                                                        <a href="#!"><i class="far fa-file-code f-36"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Winston</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-winston">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="advance-1" />
                                                <figcaption>
                                                    <h2>Jolly <span>Winston</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="far fa-star"></i></a>
                                                        <a href="#!"><i class="far fa-comments"></i></a>
                                                        <a href="#!"><i class="far fa-envelope-open"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-winston">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="advance-2" />
                                                <figcaption>
                                                    <h2>Jolly <span>Winston</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="far fa-star"></i></a>
                                                        <a href="#!"><i class="far fa-comments"></i></a>
                                                        <a href="#!"><i class="far fa-envelope-open"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Selena</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-selena">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="advance-3" />
                                                <figcaption>
                                                    <h2>Happy <span>Selena</span></h2>
                                                    <p>Selena is a tiny-winged bird.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-selena">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="advance-4" />
                                                <figcaption>
                                                    <h2>Happy <span>Selena</span></h2>
                                                    <p>Selena is a tiny-winged bird.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Terry</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-terry">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="advance-5" />
                                                <figcaption>
                                                    <h2>Noisy <span>Terry</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-download"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-share"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-tags"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-terry">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="advance-6" />
                                                <figcaption>
                                                    <h2>Noisy <span>Terry</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-download"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-share"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-tags"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Phoebe</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-phoebe">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="advance-1" />
                                                <figcaption>
                                                    <h2>Plain <span>Phoebe</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-user"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-cog"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-phoebe">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="advance-2" />
                                                <figcaption>
                                                    <h2>Plain <span>Phoebe</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-user"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-cog"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Apollo</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-apollo">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="advance-3" />
                                                <figcaption>
                                                    <h2>Strong <span>Apollo</span></h2>
                                                    <p>Apollo's last game of pool was so strange.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-apollo">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="advance-4" />
                                                <figcaption>
                                                    <h2>Strong <span>Apollo</span></h2>
                                                    <p>Apollo's last game of pool was so strange.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Kira</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-kira">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="advance-5" />
                                                <figcaption>
                                                    <h2>Dark <span>Kira</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-home"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-download"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-share"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-kira">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="advance-6" />
                                                <figcaption>
                                                    <h2>Dark <span>Kira</span></h2>
                                                    <p>
                                                        <a href="#!"><i class="fa fa-fw fa-home"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-download"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-heart"></i></a>
                                                        <a href="#!"><i class="fa fa-fw fa-share"></i></a>
                                                    </p>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Steve</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-steve">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="advance-1" />
                                                <figcaption>
                                                    <h2>Lonely <span>Steve</span></h2>
                                                    <p>Steve was afraid of the Boogieman.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-steve">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="advance-2" />
                                                <figcaption>
                                                    <h2>Lonely <span>Steve</span></h2>
                                                    <p>Steve was afraid of the Boogieman.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Moses</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-moses">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="advance-3" />
                                                <figcaption>
                                                    <h2>Cute <span>Moses</span></h2>
                                                    <p>Moses loves to run after butterflies.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-moses">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="advance-4" />
                                                <figcaption>
                                                    <h2>Cute <span>Moses</span></h2>
                                                    <p>Moses loves to run after butterflies.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Jazz</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-jazz">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="advance-5" />
                                                <figcaption>
                                                    <h2>Dynamic <span>Jazz</span></h2>
                                                    <p>When Jazz starts to chase cars, the whole world stands still.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-jazz">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="advance-6" />
                                                <figcaption>
                                                    <h2>Dynamic <span>Jazz</span></h2>
                                                    <p>When Jazz starts to chase cars, the whole world stands still.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Ming</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-ming">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-1.jpg" alt="advance-1" />
                                                <figcaption>
                                                    <h2>Funny <span>Ming</span></h2>
                                                    <p>Ming sits in the corner the whole day. She's into crochet.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-ming">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-2.jpg" alt="advance-2" />
                                                <figcaption>
                                                    <h2>Funny <span>Ming</span></h2>
                                                    <p>Ming sits in the corner the whole day. She's into crochet.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Ming</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-lexi">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-3.jpg" alt="advance-3" />
                                                <figcaption>
                                                    <h2>Altruistic <span>Lexi</span></h2>
                                                    <p>Each and every friend is special. Lexi won't hide a single cookie.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-lexi">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-4.jpg" alt="advance-4" />
                                                <figcaption>
                                                    <h2>Altruistic <span>Lexi</span></h2>
                                                    <p>Each and every friend is special. Lexi won't hide a single cookie.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Duke</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="grid">
                                            <figure class="effect-duke">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-5.jpg" alt="advance-5" />
                                                <figcaption>
                                                    <h2>Messy <span>Duke</span></h2>
                                                    <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                            <figure class="effect-duke">
                                                <img src="~/assets/images/gallery-grid/img-grd-gal-6.jpg" alt="advance-6" />
                                                <figcaption>
                                                    <h2>Messy <span>Duke</span></h2>
                                                    <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
                                                    <a href="#!">View more</a>
                                                </figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Gallery-Grid ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!--lightbox css -->
    <link rel="stylesheet" href="~/assets/plugins/lightbox2-master/css/lightbox.min.css">
    <!-- Gallery css -->
    <link rel="stylesheet" href="~/assets/css/pages/gallery.css">
}

@section Scripts{
    <!--lightbox Js -->
    <script src="~/assets/plugins/lightbox2-master/js/lightbox.min.js"></script>
    <script>
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true
        })
    </script>
}

